<template>
    <div class="big">
        <div class="navigation">
            <span @click="back">
                <img src="../../assets/home-img/返回1.png" alt="">
            </span>
            <h3>{{ doctorList.name }}医生的服务评价</h3>
            <span></span>
        </div>
        <header>
            <span v-for="(item, index) in filterList" :key="index" @click="sift(item)">{{ item }}(41)</span>
        </header>
        <main>
            <div class="listItem" v-for="(item, index) in allList" :key="index">
                <div class="star">
                    <div class="p">
                        <div class="van-ellipsis">
                            {{ item.city }}用户{{ item.pub }}评价了图文咨询
                        </div>
                    </div>
                    <van-rate v-model="item.star" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" />
                </div>
                <div class="type">
                    <span>{{ item.evaluate1 }}</span>
                    <span>{{ item.evaluate2 }}</span>
                    <span>{{ item.evaluate3 }}</span>
                    <span>{{ item.evaluate4 }}</span>
                </div>
                <div class="content">
                    {{ item.content }}
                </div>
                <div class="time">
                    2024-12-25&ensp;{{ item.name }}
                </div>
            </div>
        </main>
        <footer>
            <button @click="open">添加评论</button>
            <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '100%' }">
                <van-form @submit="onSubmit">
                    <van-cell-group inset>
                        <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                            :rules="[{ required: true, message: '请填写用户名' }]" />
                        <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]" />
                        <van-rate v-model="value" />
                    </van-cell-group>
                    <div style="margin: 16px;">
                        <van-button round block type="primary" native-type="submit">
                            提交
                        </van-button>
                    </div>
                </van-form>
            </van-popup>
        </footer>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import http from "../../http/http";

const value = ref(3);
const username = ref('');
const password = ref('');
const keyword = ref('');
const onSubmit = (values) => {
    console.log('submit', values);
};

const showBottom = ref(false);
const route = useRoute();
const router = useRouter();
const id = route.query.id;
const doctorList = ref([]);
const doctorAllList = ref([]);
const allList = ref([]);
const filterList = ref(['全部', '态度非常好', '回复很及时', '语气很温和', '讲解很细致', '回答很及时', '回答很专业', '讲解细致耐心', '态度很好'])

// 医生
const getDoctorList = async () => {
    await http.get(`/doctorList?id=${id}`).then(res => {
        doctorList.value = res.data.data;
    })
}

// 评论
const getDoctorAllList = async () => {
    await http.get('/comment').then(res => {
        doctorAllList.value = res.data.data;
        allList.value = doctorAllList.value;
    })
}

// 筛选
const sift = (e) => {
    if (e == '全部') {
        allList.value = doctorAllList.value;
    } else {
        allList.value =[...doctorAllList.value.filter(item => item.evaluate1 == e),...doctorAllList.value.filter(item => item.evaluate2 == e),...doctorAllList.value.filter(item => item.evaluate3 == e),...doctorAllList.value.filter(item => item.evaluate4 == e)];
    }
}

const open = () => {
    showBottom.value = true;
}


const back = () => {
    router.back();
}

onMounted(() => {
    getDoctorList();
    getDoctorAllList();
})
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.big {
    width: 100%;
    height: 100%;
    background-color: #f6f6f6;

    .navigation {
        width: 100%;
        height: 92px;
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;

        h3 {
            flex: 1;
            text-align: center;
            font-size: 35px;
        }

        span {
            width: 40px;
            padding-top: 7px;

            img {
                width: 40px;
                height: 40px;
                margin: 0 10px;
            }
        }
    }

    header {
        width: 100%;
        height: 200px;
        background-color: #fff;
        padding: 0 20px;

        span {
            display: inline-block;
            border: 1px solid;
            padding: 5px 20px;
            margin: 10px 10px;
            border-radius: 21px;
        }
    }

    main {
        width: 100%;
        height: 900px;
        padding: 0 20px;
        overflow: scroll;

        .listItem {
            width: 100%;
            padding: 0 20px;
            background-color: #fff;
            border-radius: 15px;

            .star {
                width: 100%;
                height: 60px;
                display: flex;
                margin-top: 20px;
                justify-content: space-between;
                align-items: center;

                .p {
                    width: 60%;
                    color: #5b5b5b;
                }
            }

            .type {
                width: 100%;

                span {
                    display: inline-block;
                    margin-right: 15px;
                    margin-bottom: 8px;
                    padding: 5px 20px;
                    border: 2px solid #e9e9e9;
                    border-radius: 21px;
                    color: #5a5a5a;
                }
            }

            .content {
                width: 100%;
                line-height: 65px;
                font-size: 30px;
            }

            .time {
                width: 100%;
                line-height: 60px;
                color: #b9b9b9;
            }
        }
    }

    footer {
        width: 100%;
        height: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;

        button {
            width: 95%;
            height: 70px;
            border-radius: 35px;
            background-color: #00bd8d;
            border: 0;
            color: #fff;
            font-size: 35px;
        }
    }
}
</style>
